<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>FLIP</title>
  <style>
  .ele {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    background: #ccc;
  }
  .move {
    width: 90px;
    height: 200px;
    top: 80px;
    left: 300px;
  }
  </style>
</head>
<body>
  <div class="ele"></div>
  <script>
    const elm = document.querySelector('.ele');

    // First: get the current bounds
    const first = elm.getBoundingClientRect();

    // 变化
    elm.onclick = () => {
      elm.classList.add('move');

      // Last: get the final bounds
      const last = elm.getBoundingClientRect();

      console.log('click', first, last);

      // Invert: determine the delta between the
      // first and last bounds to invert the element
      const deltaX = first.left - last.left;
      const deltaY = first.top - last.top;
      const deltaW = first.width / last.width;
      const deltaH = first.height / last.height;

      // Play: animate the final element from its first bounds
      // to its last bounds (which is no transform)
      elm.animate([{
        transformOrigin: 'top left',
        transform: `
          translate(${deltaX}px, ${deltaY}px)
          scale(${deltaW}, ${deltaH})
        `
      }, {
        transformOrigin: 'top left',
        transform: 'none'
      }], {
        duration: 300,
        easing: 'ease-in-out',
        fill: 'both'
      });
    }
  </script>
</body>
</html>
